// 工具的封装
/**
 * @param {选择器} selector 
 */
function $(selector){
    return document.querySelector(selector);
}

var hotList = $("#hot_list");
var allList = $("#all_list");
// var displaywrap = $(".city-header-wrap");
// var wrap = $("#wrap");
var odiv = document.querySelectorAll(".location-header");
// console.log(hotList,allList,wrap,odiv);

fetch('./json/citylist.json').then(res => {
    return res.json();
}).then(data => {
    jsondata(data);
})

function jsondata(data){
    let citylist = data;
    // console.log(citylist);
    var html = '';

    for(let index in citylist.hotCities){
        let i = citylist.hotCities[index];
        // console.log(i);
        html +=`<span class="name-city">${i}</span>`
    }
    hotList.innerHTML = html;

    var htmlall = '';
    citylist.allCities.forEach( item =>{
        // console.log(item);
        htmlall +=`<span class="name-city">${item}</span>`
    })
    allList.innerHTML = htmlall;

}
// wrap.addEventListener('mouseleave',() =>{
//     displaywrap.className += " ";
// })
// wrap.addEventListener('mouseenter',() =>{
//     displaywrap.className += " active";
// })
for(var i=0; i<odiv.length;i++){
    
    odiv[i].onmouseover = function (){
        this.children[1].style.display='block';
    }
    odiv[i].onmouseout = function (){
        this.children[1].style.display='none';
    }
}
